<template>
  <q-page class="q-pa-md q-gutter-md scroll" id="page">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        图标
        <span class="text-subtitle1">本页作为项目图标库使用</span>
      </div>
    </div>
    <div class="row items-center" v-for="category in allIconsList" :key="category.category">
      <div class="q-pb-xs text-h5 row col-12">
        <span class="text-subtitle1">{{ category.category }}</span>
      </div>
      <div class="row col-12">
        <q-btn-group outline>
          <q-btn size="md" outline no-caps :href="`#${icons.category}`" color="primary" v-for="icons in category.list"
            :key="icons.category">{{icons.category}}</q-btn>
        </q-btn-group>
      </div>
    </div>
    <q-btn size="md" color="primary" @click="expansionIcons">{{ allIconsOpen === true? '展开所有':'折叠所有'}}</q-btn>
    <q-expansion-item expand-icon-toggle header-class="text-subtitle1" class="p-pa-md shadow-2 scroll" :id="icons.category"
      :label="`${icons.category} (${icons.icons.length}个图标)`" v-for="icons in iconsList" :key="icons.category"
      :default-opened="icons.open" v-model="icons.open">
      <div class="q-pa-md">
        <div class="row">
          <div v-for="icon in icons.icons" :key="icon" class="icon text-center">
            <q-icon :name="icon" size="30px" />
            <p class="text-caption">{{icon}}</p>
          </div>
        </div>
      </div>
    </q-expansion-item>
    <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
      <q-btn fab icon="keyboard_arrow_up" color="accent" />
    </q-page-scroller>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'Icons'
}
</script>
<script lang="ts" setup>

import allIcons from '../../../public/icons.json'
import {reactive, ref} from 'vue'
import _ from 'lodash'

let allIconsList = reactive(allIcons)

let allIconsOpen = ref(false)

let iconsList = ref([])

const processingIcons = function () {
  let icon = []
  _.forEach(allIcons, (item) => {
      _.forEach(item.list,(iconObj) => {
        icon.push(iconObj)
      })
  })
  iconsList.value = icon
}

processingIcons()
const expansionIcons = function () {
  _.forEach(iconsList.value, (item) => {
    item.open = !item.open
  })
  allIconsOpen.value = !allIconsOpen.value
}

</script>

<style lang="scss" scoped>
.icon {
  width: 150px;
  height: 60px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  margin: 0 5px 5px 0;
  padding-top: 4px;
}
</style>
